<template>
	<view>
		<view v-for="item in renderData" :key="item._id">
			<view class="header">
				<view class="header-1">{{item.name}}</view>
				<view class="header-2">
					<image src="../../static/@1/caunbeilaingfanyichu_slices/xuhuan.png" mode="" class="header-2-1"></image>
					<image src="../../static/@1/caunbeilaingfanyichu_slices/zhuanfa.png" mode="" class="header-2-2"></image>
				</view>
			</view>
			
			<view class="middle-img">
				<image :src="item.coverpic"></image>
			</view>
			<view class="button-1">会员低至2元/月，免广告、看10000+名额视频</view>
			<view class="text-middle">{{item.name}}</view>
			<view class="lai">
				<text class="text1">{{`${item.pageview}万浏览`}}</text>
				<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
				<text class="text1">{{`${item.collections}万浏览`}}</text>
				<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
			</view>
			<view class="blankColor"></view>
			<view class="experience">
				<view class="expe-1">心得:</view>
				<view class="expe-2">{{item.tips[0].tipdescribe}}</view>
				<view class="expe-3">养生必读:</view>
				<view class="expe-3">{{item.classtips | menuFilter}}</view>
			</view>
			<view class="blankColor"></view>
			<view class="middle-box">
				<view class="lai">
					<text class="text1">{{`${item.needtime}分钟`}}</text>
					<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
					<text class="text1">初墩（级别）</text>
					<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
				</view>
				<view class="material">
					<text >用料</text>
					<text class="visit" style="color: #f8caab;">加入购物清单</text>
				</view>
				<view class="main">
					<view class="main-1">
						<!-- <view class="main-1-1"> -->
							<!-- <view class="main-1-1-1">
								<text class="speAll actived">所有食材</text>
								<text>所有食材</text>
								<text>所有食材</text>
								<text>所有食材</text>
								<text>所有食材</text>
							</view> -->
					<!-- 	</view> -->
						<view class="main-1-1" v-for="option in item.ingredient">
							<view class="main-1-1-2">
							 <view class="suibian"><text>{{option.name}}</text></view>	
							 <view class="suibian1"><text>{{option.number}}</text></view>	
							</view>
						</view>
						<!-- <view class="main-1-1">9</view>
						<view class="main-1-1">9</view>
						<view class="main-1-1">9</view>
						<view class="main-1-1">9</view> -->
					</view>
				</view>
				<view class="step" v-for="(obj,index) in item.method" :key="item.index">
					<view class="step-1">{{`步骤${index+1}`}}</view>
					<view class="step-img">
						<image :src="obj.img" mode=""></image>
					</view>
					<view class="step-text">{{obj.describe}}</view>
				</view>
			</view>
			<view class="division"></view>
			<view class="tipData">
				<view style="margin-top: 18rpx;font-size: 29rpx;margin-bottom: 26rpx;">小贴士:</view>
				<view class="tipData-1">{{item.tips[0].tipdescribe}}</view>
			</view>
		</view>
		<view class="relation-cook">相关菜谱</view>
		<view class="bottom-box">
			<view class="bottom-box-1">
				<image src="../../static/@1/caunbeilaingfanyichu_slices/tupian 2.png" mode=""></image>
				<view class="middle-text">南部方酥锅盔</view>
				<view class="lai">
					<text class="text1">11.3万</text>
					<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
					<text class="text1">3.9万</text>
					<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
				</view>
			</view>
			<view class="bottom-box-1">
				<image src="../../static/@1/caunbeilaingfanyichu_slices/tupian 2.png" mode=""></image>
				<view class="middle-text">南部方酥锅盔</view>
				<view class="lai">
					<text class="text1">11.3万</text>
					<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
					<text class="text1">3.9万</text>
					<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
				</view>
			</view>
			<view class="bottom-box-1">
				<image src="../../static/@1/caunbeilaingfanyichu_slices/tupian 2.png" mode=""></image>
				<view class="middle-text">南部方酥锅盔</view>
				<view class="lai">
					<text class="text1">11.3万</text>
					<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
					<text class="text1">3.9万</text>
					<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
				</view>
			</view>
			<view class="bottom-box-1">
				<image src="../../static/@1/caunbeilaingfanyichu_slices/tupian 2.png" mode=""></image>
				<view class="middle-text">南部方酥锅盔</view>
				<view class="lai">
					<text class="text1">11.3万</text>
					<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
					<text class="text1">3.9万</text>
					<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getSpeDataApi} from "@/apis/search.js" 
	export default {
		
		data() {
			return {
                params1:{
                  	method:"POST",
                  	data:{
                         _id:""
                  	} 
              },
			  getDataId:"",
			  renderData:[]
			};
		},
		// created(){
		// 	this.getSpeData();
		// },
	
		 onLoad:function({postId}){
			 console.log("成功拿到的Id",postId)
			this.params1.data._id=postId;
			this.getSpeData();
		},
		methods:{
			getSpeData(){
				getSpeDataApi(this.params1).then((res)=>{
					// const getId= this.$route.query.postId;
					// console.log('ooo',getId)
					this.params1.data._id=this.getDataId
					console.log('pppp',res);
					this.renderData=res
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.header {
		height: 230rpx;
		width: 750rpx;
		background-image: url("../../static/@1/zhifuwancheng _slices/di.png");
		overflow: hidden;

		.header-1 {
			margin-top: 112rpx;
			width: 100%;
			height: 34rpx;
			line-height: 34rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.header-2 {
			width: 100%;
			height: 60rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				font-size: 32rpx;
			}

			.header-2-1 {
				margin-left: 630rpx;
				margin-right: 15rpx;
			}
		}
	}

	.middle-img {
		width: 750rpx;
		height: 384rpx;
		margin-bottom: 28rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.button-1 {
		height: 84rpx;
		width: 688rpx;
		background-color: #ebbb6d;
		font-size: 27rpx;
		color: white;
		line-height: 84rpx;
		text-align: center;
		border-radius: 30rpx;
		margin-left: 32rpx;
		margin-bottom: 52rpx;
	}

	.text-middle {
		color: #2c2c2c;
		font-size: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		width: 750rpx;
		text-align: center;
		margin-bottom: 32rpx;
	}

	.lai {
		font-size: 24rpx;
		margin-bottom: 42rpx;
        display: flex;
		justify-content: center;
		align-items: center;
		.bian {
			margin-left: 10rpx;
			margin-right: 64rpx;
		}

		.text1 {
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
		}

		.enen {
			margin-left: 10rpx;
		}
		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
	.blankColor{
		height: 28rpx;
		width: 750rpx;
		background-color: #f6f7f8;
	}
	.experience{
		padding: 34rpx 36rpx 0 32rpx;
		.expe-1{
			font-size: 30rpx;
			margin-bottom: 36rpx;
		}
		.expe-2{
			width:675rpx;
			min-height: 106rpx;
			font-size: 30rpx;
			margin-bottom: 40rpx;
			// border: 1px solid red;
		}
		.expe-3{
			margin-bottom: 34rpx;
			font-size: 30rpx;
		}
	}
	.middle-box{
		padding: 0 36rpx 0 32rpx;
		overflow: hidden;
		.lai{
			font-size: 24rpx;
			margin-top: 40rpx;
			width: 750rpx;
			height: 30rpx;
			margin-bottom: 40rpx;
			.bian{
				margin-left: 10rpx;
				margin-right: 40rpx;
			}
			.text1{
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
			}
			.enen{
				margin-left: 10rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
			}
		}
		.material{
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom: 34rpx;
		}
		.main{
			min-height: 260rpx;
			width: 670rpx;
			color: rgb(140, 140, 140);
			.main-1{
				width: 658rpx;
			    min-height: 260rpx;
				// border: 1px solid red;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				.main-1-1{
					
					width: 100%;
					height: 82rpx;
					border-bottom: 1px solid rgb(246, 246, 246);
					display: flex;
					align-items: center;
					.main-1-1-2{
						width: 100%;
						height: 40rpx;
						display: flex;
						align-items: center;
						text{
							font-size: 36rpx;
						}
						.suibian{
							margin-right: 186rpx;
							height: 40rpx;
							width: 150rpx;
						}
					}
					.main-1-1-1{
						width: 100%;
						height: 40rpx;
						display: flex;
						align-items: center;
						text{
							font-size: 22rpx;
							margin-right: 36rpx;
						}
						.speAll{
							font-size: 28rpx;
							margin-right: 32rpx;
						}
					}
				}
			}
		}
	}
	.step{
		height: 656rpx;
		width: 100%;
		font-size: 30rpx;
		overflow: hidden;
		.step-1{
			line-height: 100rpx;
			height: 100rpx;
			// margin-top: 46rpx;
			// margin-bottom: 26rpx;
		}
		.step-img{
			height: 428rpx;
			width: 100%;
			margin-bottom: 34rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.step-text{
			font-size: 30rpx;
			margin-bottom: 38rpx;
		}
	}
	.division{
		margin-top: 10rpx;
		border-bottom: 1px solid #f8f8f8;
		margin-bottom: 20rpx;
	}
	.tipData{
		min-height: 126rpx;
		width: 690rpx;
		border-radius: 10rpx;
		background-color: #eaeaea;
		overflow: hidden;
		margin-bottom: 26rpx;
		margin-top: 40rpx;
		margin-left: 30rpx;
		.tipData-1{
			font-size: 25rpx;
			min-height: 60rpx;
			width: 670rpx;
			margin-bottom: 15rpx;
		}
	}
	.relation-cook{
		font-size: 30rpx;
		padding: 0 40rpx 0 40rpx;
		box-sizing: border-box;
		margin-bottom: 22rpx;
	}
	.bottom-box{
		height: 712rpx;
		width: 686rpx;
		// padding: 0 40rpx 0 40rpx;
		// box-sizing: border-box;
		// border: 1px solid red;
		margin-left: 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.bottom-box-1{
			width: 339rpx;
			height: 340rpx;
			// border: 1px solid forestgreen;
			image{
				width: 339rpx;
				height: 248rpx;
				margin-bottom: 10rpx;
			}
			.middle-text{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
			}
			.lai{
				font-size: 24rpx;
				margin-bottom: 18rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				.bian{
					// margin-left: 10rpx;
					margin-right: 64rpx;
					margin-top: 13rpx;
				}
				.text1{
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
				}
				.enen{
					margin-left: 10rpx;
					margin-top: 13rpx;
				}
				image{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	
	
	
	
	
</style>
